<!-- 广场 - 课程 - 心得 - 心得详情 -->
<template>
  <view>
    <z-navbar title="学习心得" bgColor="linear-gradient(0deg, #fffbee 0%, #faf9f7 100%)" :border-bottom="true"></z-navbar>
    <view class="px-4 pt-4 pb-25 bg-home">
      <view class="px-4 pt-2 pb-5 bg-#f5b529 rounded-lg">
        <view class="flex items-start">
          <u-image class="flex-shrink-0 mt-3" :src="data.avatar" width="80" height="80" border-radius="50%" />
          <view class="flex-1 ml-3 mt-3 c-#fff">
            <view class="text-32">{{ data.nickname || '' }}</view>
            <view class="text-24">和你分享在【八零学社】的学习心得</view>
          </view>
          <view v-if="data.is_self" class="flex items-center flex-shrink-0" @click="emit('edit')">
            <view class="text-28 c-#fff">编辑</view>
            <u-icon name="arrow-right" size="24" color="#fff" />
          </view>
        </view>
        <view class="bg-#fff rounded-lg mt-5 px-4 py-5 c-#999 text-28">
          <view class="mb-2 c-#333 text-40 font-semibold">五个知识点</view>
          <template v-if="!data.knowledge_point || data.knowledge_point.length == 0">
            <view v-for="(item, index) in 5" :key="index" class="mt-2 flex">
              <view class="flex-shrink-0">{{ index + 1 }}.</view>
            </view>
          </template>
          <template v-else>
            <view v-for="(item, index) in data.knowledge_point" :key="index" class="mt-2 flex">
              <view class="flex-shrink-0">{{ index + 1 }}.</view>
              <view class="flex-1">{{ item.content }}</view>
            </view>
          </template>
          <u-line margin="40rpx 0 30rpx 0"></u-line>
          <view class="mb-3 c-#333 text-40 font-semibold">三个感悟</view>
          <template v-if="!data.apperception || data.apperception.length == 0">
            <view v-for="(item, index) in 3" :key="index" class="mt-2 flex">
              <view class="flex-shrink-0">{{ index + 1 }}.</view>
            </view>
          </template>
          <template v-else>
            <view v-for="(item, index) in data.apperception" :key="index" class="mt-2 flex">
              <view class="flex-shrink-0">{{ index + 1 }}.</view>
              <view class="flex-1">{{ item.content }}</view>
            </view>
          </template>
          <u-line margin="40rpx 0 30rpx 0"></u-line>
          <view class="mb-3 c-#333 text-40 font-semibold">一个执行点</view>
          <view class="mt-2 flex">
            <view class="flex-shrink-0">1.</view>
            <view class="flex-1">{{ data.execution_point }}</view>
          </view>
        </view>
        <view class="flex px-4 py-5 mt-4 rounded-lg bg-#fff">
          <view class="flex-1">
            <view class="text-32 c-#333 font-semibold">{{ state.class?.class_name || '' }}</view>
            <view class="mt-4 text-24 c-#666">微信扫码学习此课程</view>
          </view>
          <u-image class="flex-shrink-0" :src="state.qrcode" width="120" height="120" />
        </view>
      </view>
    </view>
    <!--底部按钮-->
    <view v-if="data.is_self" class="bottom-wrap-16 flex bg-#fff border-top px-4">
      <view class="button-share" @tap="onSharePoster">微信分享</view>
      <viwe v-if="props.fromType == 'society'" class="button-public ml-3" @tap="onTrendAdd">发布动态</viwe>
    </view>
    <!-- 海报画板 -->
    <l-painter ref="painter" css="width: 690rpx; padding-bottom: 40rpx; background-color:#F4AF22; border-radius: 12rpx"
      custom-style="position: fixed; left: 200%">
      <l-painter-view css="display: flex; align-items:center; padding: 32rpx;">
        <l-painter-image :src="userInfo.avatar" css="width: 80rpx; height: 80rpx; border-radius:50%;" />
        <l-painter-view css="flex: 1; margin-left: 26rpx;">
          <l-painter-text :text="userInfo.nickname" css="display:block; fontSize: 32rpx; color: #fff; maxLines: 1;" />
          <l-painter-text text="和你分享在【八零学社】的学习心得" css="fontSize: 24rpx; color: #fff; maxLines: 1; margin-top: 4rpx;" />
        </l-painter-view>
      </l-painter-view>
      <l-painter-view css="margin: 8rpx 32rpx; background-color: #fff; border-radius: 12rpx;">
        <l-painter-view css="padding: 32rpx;">
          <l-painter-text text="五个知识点" css="padding-bottom: 20rpx; fontSize: 30rpx; color: #333; font-weight: bold;" />
          <l-painter-view v-for="(item, index) in data.knowledge_point" :key="index"
            css="display: flex; padding-bottom:20rpx;">
            <l-painter-view css="flex-shrink: 0;">
              <l-painter-text :text="`${index + 1}.`" css="display:block; fontSize: 28rpx; color: #999;" />
            </l-painter-view>
            <l-painter-text :text="item.content" css="flex: 1; display:block; fontSize: 28rpx; color: #999;" />
          </l-painter-view>
        </l-painter-view>
        <l-painter-view css="margin: 0 32rpx; height: 1rpx; background-color: #E0E0E0;" />
        <l-painter-view css="padding: 32rpx;">
          <l-painter-text text="三个感悟" css="padding-bottom: 20rpx; fontSize: 30rpx; color: #333; font-weight: bold;" />
          <l-painter-view v-for="(item, index) in data.apperception" :key="index"
            css="display: flex; margin-bottom:20rpx;">
            <l-painter-view css="flex-shrink: 0;">
              <l-painter-text :text="`${index + 1}.`" css="display:block; fontSize: 28rpx; color: #999;" />
            </l-painter-view>
            <l-painter-text :text="item.content" css="flex: 1; display:block; fontSize: 28rpx; color: #999;" />
          </l-painter-view>
        </l-painter-view>
        <l-painter-view css="margin: 0 32rpx; height: 1rpx; background-color: #E0E0E0;" />
        <l-painter-view css="padding: 32rpx;">
          <l-painter-text text="一个执行点" css="padding-bottom: 20rpx; fontSize: 30rpx; color: #333; font-weight: bold;" />
          <l-painter-view css="display: flex; margin-bottom:20rpx;">
            <l-painter-text text="1.`" css="fontSize: 28rpx; color: #999;" />
            <l-painter-text :text="data.execution_point" css="fontSize: 28rpx; color: #999;" />
          </l-painter-view>
        </l-painter-view>
      </l-painter-view>
      <l-painter-view
        css="display: flex; align-items: center; margin: 30rpx 32rpx 0 32rpx; padding: 32rpx; background-color: #fff; border-radius: 12rpx;">
        <l-painter-view css="flex: 1">
          <l-painter-text :text="state.class?.class_name || ''" css="display: block; fontSize: 32rpx; color: #333;" />
          <l-painter-text text="微信扫码学习此课程" css="display: block; fontSize: 24rpx; color: #999; margin-top: 18rpx;" />
        </l-painter-view>
        <l-painter-image :src="state.qrcode" css="width: 120rpx; height: 120rpx;" />
      </l-painter-view>
    </l-painter>
  </view>
</template>
<script setup>
import { useUserStore } from '@/store/user'
import { uploadUrl } from '@/common/config/config'
import { getOnlineCourseDetail } from '@/common/http/module/square';
import { getQrcode } from '@/common/http/module/common'
import useSaveImage from '@/common/hooks/useSaveImage'

const userStore = useUserStore()
const painter = ref()
const emit = defineEmits(['edit'])
const props = defineProps({
  data: Object,
  classId: String,
  fromType: String,
})

const state = reactive({
  class: '',
  qrcode: ''
})

const userInfo = computed(() => userStore.userInfo)

function loadData() {
  getOnlineCourseDetail(props.classId).then(res => {
    state.class = res.data
  })
  loadQrcode()
}

function loadQrcode() {
  const params = {
    path: 'package_square/pages/course/detail',
    scene: `${userInfo.value.id}_${props.classId}`,
    type: -1,
    item_id: -1
  }
  getQrcode(params).then(res => {
    state.qrcode = res.data?.qrcode
  })
}

function onSharePoster() {
  nextTick(() => {
    painter.value.canvasToTempFilePath({
      fileType: "jpg",
      pathType: 'url'
    }).then((res) => {
      console.log('canvasToTempFilePath', res.tempFilePath);
      if (uni.showShareImageMenu) {
        uni.showShareImageMenu({
          path: res.tempFilePath,
          success: () => { },
          complete: res => {
            console.log('showShareImageMenu', res);
          }
        })
      } else {
        useSaveImage(res.tempFilePath)
      }
    })
  })
}

function onTrendAdd() {
  nextTick(() => {
    uni.showLoading({
      title: '正在生成分享图'
    })
    painter.value.canvasToTempFilePath({
      fileType: "jpg",
      pathType: 'url'
    }).then((res) => {
      uni.uploadFile({
        url: uploadUrl,
        header: { token: userStore.token },
        filePath: res.tempFilePath,
        name: 'file',
        success: res => {
          const data = JSON.parse(res.data)
          if (data.code == 1) {
            const fullurl = data.data.fullurl
            uni.navigateTo({
              url: `/package_society/pages/trend/add?club_id=${userStore.currentSocietyId}&image=${fullurl}`
            })
          }
        },
        complete: () => uni.hideLoading()
      })
    })
  })
}

onMounted(() => loadData())
</script>

<style lang="scss" scoped>
.bg-home {
  height: 100vh;
  background: linear-gradient(0deg, rgba(246, 246, 246, 1) 0%, rgba(249, 249, 249, 1) 50.76%, rgba(255, 251, 239, 1) 97.54%, rgba(255, 251, 238, 1) 100%);
}

.border-top {
  border-top: 2rpx solid #eee;
}

.button-share {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid #F4AF22;
  color: #F4AF22;
  font-size: 28rpx;
  height: 68rpx;
  border-radius: 10rpx;
}

.button-public {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4af22;
  color: #ffffff;
  font-size: 28rpx;
  height: 68rpx;
  border-radius: 10rpx;

}
</style>

